import React, { Component } from 'react';
import {Platform, StyleSheet, Text, Button, View, StatusBar, Image, DeviceEventEmitter} from 'react-native';
import SegmentedControlTab from 'react-native-segmented-control-tab'
import { createMaterialTopTabNavigator, createAppContainer } from 'react-navigation'
import List from './list/List'
import { API } from "../../api";
import BuyCoin from './buy-coin/BuyCoin'
import SellCoin from './sell-coin/SellCoin'

import ScrollableTabView, {ScrollableTabBar} from 'react-native-scrollable-tab-view'
import {i18n} from "../../utils/locales/i18n";
import {getUserInfo} from "../../utils/login";
import {DeviceStorage} from "../../utils/DeviceStorage";


type Props = {};
export default class Trade extends Component<Props> {
	static navigationOptions = {
		header: null,
		headerBackTitle: null,
		headerTintColor: '#0f0f0f',
	}
	constructor(props) {
		super(props)
		this.state = {
			selectedIndex: 0,
			isLogin: false
		}
	}
	componentWillMount(): void {
		this._getUserInfo()
	}
	_getUserInfo = async () => {
		await getUserInfo()
		const jwt = await DeviceStorage.get('jwt')
		if (jwt) {
			this.setState({
				isLogin: true
			})
		}
	}
	changeTab = (index) => {
		this.setState({
			selectedIndex: index
		})
	}
	toBuy = (item) => {
		if (this.state.isLogin) {
			this.props.navigation.navigate('BuyIndex', {seller: item})
		} else {
			this.props.navigation.navigate('LoginScreen')
		}
	}
	toSell = (item) => {
		if (this.state.isLogin) {
			this.props.navigation.navigate('SellIndex', {seller: item})
		} else {
			this.props.navigation.navigate('LoginScreen')
		}
	}

	render() {
		return (
			<View style={styles.container}>
				<StatusBar androidtranslucent='true'
							backgroundColor="#fff"
							barStyle="dark-content"/>
				<View style={styles.header}>
					<View style={{ flex:1, justifyContent: 'center', alignItems: 'center' }}>
						<View style={{width: '50%'}}>
							<SegmentedControlTab
								values={[i18n.t('i144'), i18n.t('i145')]}
								selectedIndex={this.state.selectedIndex}
								tabStyle={{backgroundColor: '#fff', borderColor: '#ff7706' }}
								activeTabStyle={{backgroundColor: '#ff7706'}}
								tabTextStyle={{color: '#ff7706', fontSize: 16}}
								activeTabTextStyle={{color: '#fff'}}
								onTabPress={(index) => this.changeTab(index)}
							/>
						</View>
					</View>
				</View>
				{ this.state.selectedIndex === 0 ? (
					<BuyCoin toBuy={this.toBuy} toSell={this.toSell}/>
				) : (
					<SellCoin toBuy={this.toBuy} toSell={this.toSell}/>
				)}
			</View>
		);
	}
}



const styles = StyleSheet.create({
	container: {
		flex: 1,
		justifyContent: 'center',
		alignItems: 'center',
		backgroundColor: '#f2f2f2',
		// backgroundColor: '#fff',
	},
	header: {
		height: Platform.OS === 'ios' ? 90 : 70,
		paddingTop: Platform.OS === 'ios' ? 20 : 0,
		width: '100%',
		backgroundColor: '#fff'
	},
	wrapper: {
		flex: 1,
		width: '95%',
		borderRadius: 10,
		backgroundColor: '#fff',
		marginTop: 10
	}
});
